import React, {Component} from 'react';
import Taro from '@tarojs/taro';
import {AtInput, AtTextarea, AtModal, AtModalHeader, AtModalContent} from "taro-ui";
import {Image, Picker, Text, View} from "@tarojs/components";
import {
  BASE_URL,
  DOUYIN_BUSINFORM,
  DOUYIN_COMINORM,
  SYSTEM_UPLOAD,
  TARO_ENV,
  UPLODE_FALE
} from '../../constants/api';
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {vcmonitor} from "../../utils/tools";
import {h5Wx} from '../../utils/h5.service';
import Check from "./components/check";
import {newHttp} from "../../utils/request";
import {http} from "../../utils/http";
import fileUpload from "../../utils/fileUpload";
import './businessList.scss'

type PageState = {
  start_time: any
  end_time: any
  selectorBusiness: any
  site_fee_proport: any
  valid_date_type: any
  service_fee_proport: any
  commission_fee_proport: any
  main_img: any
  holiday_unavailable: any
  is_limit_stock: any
  calculation_mode: any
  vid: any
  valid_time_begin: any
  valid_time_end: any
  valid_date_days: any
  is_need_phone: any
  name: any
  price: any
  use_period: any
  weekly_unavailable: any
  valid_date_time_begin: any
  valid_date_time_end: any
  stock: any
  disabled: boolean
  business: any
  site_fee: any
  service_fee: any
  commission_fee: any
  goods_info: any
  unUseDataType: any
  is_weekly: any
  is_holiday: any
  is_unvalid_date_range: any
  useRule: any
  is_enjoy_other_discount: any
  is_need_appointment: any
  is_limit_buy: any
  start_time_head: any
  start_time_end: any
  end_time_head: any
  end_time_end: any
  limit_buy_amount: any
  appointment_time: any
  appointment_unit: any
  unvalid_date_range: any
  remark: any
  rangeTimeData: any
  isOpened: boolean
}

export default class ProductInfo extends Component {
  state: PageState = {
    holiday_unavailable: [],
    weekly_unavailable: [],
    valid_date_days: 30,
    valid_time_begin: '00:00:00',
    valid_time_end: '23:59:59',
    is_need_phone: 0,
    stock: 100,
    valid_date_type: 1,
    selectorBusiness: '',
    end_time: '',
    start_time: '',
    site_fee_proport: '',
    service_fee_proport: '',
    valid_date_time_begin: '',
    valid_date_time_end: '',
    commission_fee_proport: '',
    main_img: [],
    name: '',
    price: '',
    vid: '',
    use_period: 1,
    is_limit_stock: 0,
    calculation_mode: 1,
    disabled: false,
    business: [],
    site_fee: '',
    service_fee: '',
    commission_fee: '',
    goods_info: [{group_name: '', option_count: '', item_list: [{name: '', price: 1, count: 7}]}],
    unUseDataType: [],
    is_weekly: 0,
    is_holiday: 0,
    is_unvalid_date_range: 0,
    useRule: [],
    is_enjoy_other_discount: 0,
    is_need_appointment: 0,
    is_limit_buy: 0,
    start_time_head: '',
    start_time_end: '',
    end_time_head: '',
    end_time_end: '',
    limit_buy_amount: 5,
    appointment_time: 3,
    appointment_unit: '天',
    unvalid_date_range: '',
    remark: '',
    rangeTimeData: [],
    isOpened: false,
  }

  async UNSAFE_componentWillMount() {
    await vcmonitor(this)
    if (TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    this.getData()
    this.getShopList()
    if (this.params.openType == 'view') {
      this.setState({
        disabled: true
      })
    }
  }

  params = Taro.getCurrentInstance().router.params
  today = this.getDateInfoDate('')

  async getShopList() {
    const shopList: any = await newHttp.get(DOUYIN_BUSINFORM, {page: 1, length: 9999999})
    const list = []
    for (let i = 0; i < shopList.data.length; i++) {
      if (shopList.data[i].status == 1) {
        list.push(shopList.data[i])
      }
    }
    this.setState({
      business: list
    })
  }

  async getData() {
    const id = this.params.gid
    if (id) {
      let tableData = await newHttp.get(DOUYIN_COMINORM, {id: id, page: 1, length: 9999999})
      if (tableData && tableData.data.length > 0) {
        if (tableData.data[0].main_img.indexOf(',') > -1) {
          tableData.data[0].main_img = tableData.data[0].main_img.split(',')
        } else {
          tableData.data[0].main_img[0] = tableData.data[0].main_img
        }
        const unUseDataType: any = []
        if (tableData.data[0].is_weekly) {
          unUseDataType.push(1)
        }
        if (tableData.data[0].is_holiday) {
          unUseDataType.push(2)
        }
        if (tableData.data[0].is_unvalid_date_range) {
          unUseDataType.push(3)
        }
        const useRule = []
        if (tableData.data[0].is_enjoy_other_discount) {
          useRule.push(1)
        }
        if (tableData.data[0].is_need_appointment) {
          useRule.push(2)
        }
        if (tableData.data[0].is_limit_buy) {
          useRule.push(3)
        }
        tableData = tableData.data[0]
        this.setState({
          useRule: useRule,
          unUseDataType: unUseDataType,
          holiday_unavailable: tableData.holiday_unavailable ? tableData.holiday_unavailable.split(',') : [],
          weekly_unavailable: tableData.weekly_unavailable ? tableData.weekly_unavailable.split(',') : [],
          valid_date_days: tableData.valid_date_days || 30,
          valid_time_begin: tableData.valid_time_begin || '00:00:00',
          valid_time_end: tableData.valid_time_end || '23:59:59',
          is_need_phone: tableData.is_need_phone || 0,
          stock: tableData.stock || 100,
          valid_date_type: tableData.valid_date_type || 1,
          selectorBusiness: tableData.selectorBusiness,
          end_time: this.getDateInfo(tableData.end_time),
          end_time_head: this.getDateInfo(tableData.end_time).split(' ')[0] || this.today,
          end_time_end: this.getDateInfo(tableData.end_time).split(' ')[1],
          start_time: this.getDateInfo(tableData.start_time),
          start_time_head: this.getDateInfo(tableData.start_time).split(' ')[0] || this.today,
          start_time_end: this.getDateInfo(tableData.start_time).split(' ')[1] || this.today,
          site_fee_proport: tableData.site_fee_proport,
          service_fee_proport: tableData.service_fee_proport,
          valid_date_time_begin: this.getDateInfoDate(tableData.valid_date_time_begin) || this.today,
          valid_date_time_end: this.getDateInfoDate(tableData.valid_date_time_end) || this.today,
          commission_fee_proport: tableData.commission_fee_proport,
          main_img: tableData.main_img || [],
          name: tableData.name,
          price: tableData.price,
          vid: tableData.vid,
          use_period: tableData.use_period || 1,
          is_limit_stock: tableData.is_limit_stock || 0,
          calculation_mode: tableData.calculation_mode || 1,
          site_fee: tableData.site_fee,
          service_fee: tableData.service_fee,
          commission_fee: tableData.commission_fee,
          goods_info: tableData.goods_info ? JSON.parse(tableData.goods_info) : [{
            group_name: '',
            option_count: '',
            item_list: [{name: '', price: '1', count: 7}]
          }],
          is_weekly: tableData.is_weekly,
          is_holiday: tableData.is_holiday,
          is_unvalid_date_range: tableData.is_unvalid_date_range,
          is_enjoy_other_discount: tableData.is_enjoy_other_discount,
          is_need_appointment: tableData.is_need_appointment,
          is_limit_buy: tableData.is_limit_buy,
          limit_buy_amount: tableData.limit_buy_amount || 5,
          appointment_time: tableData.appointment_time || 3,
          appointment_unit: !tableData.appointment_unit || tableData.appointment_unit == 0 ? '天' : tableData.appointment_unit,
          unvalid_date_range: tableData.unvalid_date_range || this.today,
          remark: tableData.remark,
        })
      }
    } else {
      this.setState({
        start_time_head: this.today,
        start_time_end: this.today,
        valid_date_time_begin: this.today,
        valid_date_time_end: this.today,
        end_time_head: this.today,
        unvalid_date_range: this.today
      })
    }
  }

  async componentDidMount() {
    const rangeTimeData = []
    const hours = Array.from(new Array(24).keys(), val => {
      return val < 10 ? '0' + val : val + ''
    })
    const minute = Array.from(new Array(60).keys(), val => {
      return val < 10 ? '0' + val : val + ''
    })
    rangeTimeData.push(hours)
    rangeTimeData.push(minute)
    rangeTimeData.push(minute)
    this.setState({rangeTimeData})
    this.formTimer = null
    const formData = this.state
    const oldData = JSON.stringify(formData)
    const upData = JSON.stringify(formData)
    const {gid = ''}: any = this.params
    /*if (!gid) {
      // 缓存当前填的数据
      let data = Taro.getStorageSync('productInfoData')
      if (data && JSON.stringify(data) !== JSON.stringify(this.state)) {
        await Taro.showModal({
          title: '提示',
          cancelText: '取消',
          confirmText: '确认',
          content: '发现一个未保存的草稿 是否恢复草稿?',
          showCancel: true,
          success: (res) => {
            if (res.confirm) {
              upData = data
              data = JSON.parse(data)
              this.setState({...data})
            }
            Taro.removeStorageSync('productInfoData')
          }
        })
      }
      this.formTimer = setInterval(() => {
        const stateInfo = this.state
        if (oldData != JSON.stringify(stateInfo) && upData != JSON.stringify(stateInfo)) {
          Taro.setStorageSync('productInfoData', JSON.stringify(stateInfo))
          upData = JSON.stringify(stateInfo)
        }
      }, 500)
    }*/
  }

  formTimer: any = null
  stockRangeList = [{
    label: '不限库存',
    value: 0
  }, {
    label: '限库存',
    value: 1
  }]
  calculationList = [{
    label: '按比例计算',
    value: 1
  }, {
    label: '按金额计算',
    value: 2
  }]
  userInfoSettings = [{
    label: '不需要顾客手机号',
    value: 0
  }, {
    label: '需要顾客手机号',
    value: 1
  }]
  validDateType = [{
    label: '指定天数',
    value: 1
  }, {
    label: '指定时段',
    value: 2
  }]
  usePeriodList = [{
    label: '全天可用',
    value: 1
  }, {
    label: '仅指定时间可用',
    value: 2
  }]
  unUseDate = [{
    label: '每周不可用',
    value: 0
  }, {
    label: '节假日不可用',
    value: 1
  }, {
    label: '指定日期不可用',
    value: 2
  }]
  appointmentUnit = [{
    label: '天',
    value: 0
  }, {
    label: '小时',
    value: 1
  }, {
    label: '分钟',
    value: 2
  }]
  holidayList = ['元旦', '春节', '清明', '劳动节', '端午节', '中秋节', '国庆节', '情人节', '圣诞节']

  onChangeTime1 = e => {
    this.timeChange('valid_time_begin', e.detail.value)
  }
  onChangeTime2 = e => {
    this.timeChange('valid_time_end', e.detail.value)
  }
  timeChange = (key, val) => {
    const {rangeTimeData, formData, current} = this.state
    const hours = rangeTimeData[0][val[0]]
    const minute = rangeTimeData[1][val[1]]
    const second = rangeTimeData[2][val[2]]
    this.setState({[key]: hours + ':' + minute + ':' + second})
  }

  handleChange(field, val) {
    if (typeof val == 'string') {
      val = val.replace(/^\s|\s$/, "");
    }
    const {business} = this.state
    if (field == 'end_time_head' || field == 'start_time_head' || field == 'unvalid_date_range'
      || field == 'valid_date_time_begin' || field == 'valid_date_time_end') {
      val = this.getDateInfoDate(val)
      this.setState({[field]: val})
    } else if (field == 'price') {
      if (val.indexOf('.') < 0) {
        val = val.replace(/\b(0+)/ig, "")
      }
      val = Number(val).toFixed(2)
      this.setState({[field]: val})
    } else if (field == 'vid') {
      this.setState({[field]: business[val].id})
    } else if (field == 'calculation_mode') {
      this.setState({[field]: Number(val) + 1})
    } else if (field == 'valid_date_type') {
      this.setState({[field]: Number(val) + 1})
    } else if (field == 'use_period') {
      this.setState({[field]: Number(val) + 1})
    } else if (field == 'appointment_unit') {
      let appointment_unit
      if (val == 0) {
        appointment_unit = '天'
      } else if (val == 1) {
        appointment_unit = '小时'
      } else if (val == 2) {
        appointment_unit = '分钟'
      }
      this.setState({appointment_unit})
    } else if (field == 'service_fee_proport') {
      val = Number(val).toFixed(2)
      const service = val
      const site = 100 - Number(val)
      if (site < 20 || site > 80) {
        Taro.showToast({
          title: '商家金额占比为20%~80%，请重新输入',
          icon: 'none',
          mask: true
        });
        this.setState({service_fee_proport: '', site_fee_proport: ''})
      } else {
        this.setState({
          site_fee_proport: Number(site).toFixed(2),
          service_fee_proport: service
        })
      }
    } else if (field == 'site_fee') {
      let {site_fee, service_fee, price} = this.state
      if (service_fee && Number(service_fee) + Number(val) > Number(price)) {
        site_fee = ''
        Taro.showToast({
          title: '请计算输入正确金额',
          icon: 'none',
          mask: true
        });
      } else {
        site_fee = val
      }
      this.setState({
        site_fee: Number(site_fee).toFixed(2)
      })
    } else if (field == 'service_fee') {
      let {site_fee, service_fee, price} = this.state
      if (site_fee && Number(site_fee) + Number(val) > Number(price)) {
        service_fee = ''
        Taro.showToast({
          title: '请计算输入正确金额',
          icon: 'none',
          mask: true
        });
      } else {
        service_fee = val
      }
      this.setState({
        service_fee: Number(service_fee).toFixed(2)
      })
    } else if (field == 'commission_fee_proport' || field == 'commission_fee') {
      val = Number(val).toFixed(2)
      this.setState({[field]: val})
    } else {
      this.setState({[field]: val})
    }
  }

  handleChangeGoodsInfo(index, name, val) {
    const {goods_info} = this.state
    goods_info[index].info[name] = val
    this.setState({goods_info})
  }

  handleChangeGoodsInfoIndex(index, filed, val) {
    const {goods_info} = this.state
    if (filed == 'option_count' && val == 0) {
      goods_info[index][filed] = 'all'
    } else {
      goods_info[index][filed] = val
    }
    this.setState({goods_info})
  }

  handleChangeGoodsInfoKey(index, key, filed, val) {
    const {goods_info} = this.state
    if (filed == 'price') {
      goods_info[index]['item_list'][key][filed] = Number(val).toFixed(2)
    } else {
      goods_info[index]['item_list'][key][filed] = val
    }
    this.setState({goods_info})
  }

  getTime(val1, val2) {
    const a = new Date(val1);
    const b = new Date(val2);
    return a.getTime() > b.getTime();
  }

  async save(flag = 0) {
    const {
      use_period,
      goods_info,
      name,
      vid,
      is_limit_stock,
      price,
      calculation_mode,
      start_time_head,
      end_time_head,
      is_need_phone,
      valid_date_type
    } = this.state
    if (!name) {
      Taro.showToast({
        title: '请填写商品名称！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (vid === '') {
      Taro.showToast({
        title: '请选择所属商家！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (!this.state.main_img || this.state.main_img.length < 2) {
      Taro.showToast({
        title: '请上传2~5张商品图片',
        icon: 'none',
        mask: true
      });
      return
    }
    if (is_limit_stock === '') {
      Taro.showToast({
        title: '请选择库存设置！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (!price) {
      Taro.showToast({
        title: '请填写销售价！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (calculation_mode === '') {
      Taro.showToast({
        title: '请选择计算方式！',
        icon: 'none',
        mask: true
      });
      return
    }
    for (let i = 0; i < goods_info.length; i++) {
      if (goods_info[i].group_name == '') {
        Taro.showToast({
          title: '请确认：商品搭配名称不能为空！',
          icon: 'none',
          mask: true
        });
        return
      }
      if (goods_info[i].option_count == '') {
        Taro.showToast({
          title: '请确认：商品搭配数据类型不能为空！',
          icon: 'none',
          mask: true
        });
        return
      }
      for (let j = 0; j < goods_info[i].item_list.length; j++) {
        if (goods_info[i]['item_list'][j].name == '') {
          Taro.showToast({
            title: '请确认：商品搭配，单品名称不能为空！',
            icon: 'none',
            mask: true
          });
          return
        }
        if (goods_info[i]['item_list'][j].price <= 0) {
          Taro.showToast({
            title: '请确认：商品搭配，单品金额需大于等于0',
            icon: 'none',
            mask: true
          });
          return
        }
        if (goods_info[i]['item_list'][j].count <= 0) {
          Taro.showToast({
            title: '请确认：商品搭配，单品数量需大于等于0',
            icon: 'none',
            mask: true
          });
          return
        }
      }

    }
    if (!start_time_head) {
      Taro.showToast({
        title: '请选择开始日期！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (!end_time_head) {
      Taro.showToast({
        title: '请选择结束日期！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (is_need_phone === '') {
      Taro.showToast({
        title: '请选择用户信息设置！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (!valid_date_type) {
      Taro.showToast({
        title: '请选择可使用日期！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (!use_period) {
      Taro.showToast({
        title: '请选择使用时间段！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (this.state.valid_date_type == 2 && this.getTime(this.state.end_time_head, this.state.valid_date_time_end)) {
      Taro.showToast({
        title: '可使用日期：开始时间不能小于商品结束日期',
        icon: 'none',
        mask: true,
        duration: 5000
      });
      return
    }
    if (this.state.valid_date_type == 2 && this.getTime(this.state.valid_date_time_begin, this.state.valid_date_time_end)) {
      Taro.showToast({
        title: '可使用日期：结束时间不能小于开始时间',
        icon: 'none',
        mask: true
      });
      return
    }
    if (this.getTime(this.state.start_time_head + ' ' + '00:00:00', this.state.end_time_head + ' ' + '23:59:59')) {
      Taro.showToast({
        title: '结束时间不能小于开始时间',
        icon: 'none',
        mask: true
      });
      return
    }
    const params = {
      id: this.params.gid || '',
      holiday_unavailable: this.state.holiday_unavailable.join(','),
      weekly_unavailable: this.state.weekly_unavailable.join(','),
      valid_date_days: this.state.valid_date_days,
      valid_time_begin: this.state.valid_time_begin,
      valid_time_end: this.state.valid_time_end,
      is_need_phone: this.state.is_need_phone,
      stock: this.state.stock,
      valid_date_type: this.state.valid_date_type,
      selectorBusiness: this.state.selectorBusiness,
      end_time: this.state.end_time_head + ' ' + '23:59:59',
      start_time: this.state.start_time_head + ' ' + '00:00:00',
      site_fee_proport: this.state.site_fee_proport,
      service_fee_proport: this.state.service_fee_proport,
      valid_date_time_begin: this.state.valid_date_time_begin,
      valid_date_time_end: this.state.valid_date_time_end,
      commission_fee_proport: this.state.commission_fee_proport,
      main_img: this.state.main_img,
      name: this.state.name,
      price: this.state.price,
      vid: this.state.vid,
      use_period: this.state.use_period,
      is_limit_stock: this.state.is_limit_stock,
      calculation_mode: this.state.calculation_mode,
      site_fee: this.state.site_fee,
      service_fee: this.state.service_fee,
      commission_fee: this.state.commission_fee,
      goods_info: JSON.stringify(this.state.goods_info),
      is_weekly: this.state.is_weekly,
      is_holiday: this.state.is_holiday,
      is_unvalid_date_range: this.state.is_unvalid_date_range,
      is_enjoy_other_discount: this.state.is_enjoy_other_discount,
      is_need_appointment: this.state.is_need_appointment,
      is_limit_buy: this.state.is_limit_buy,
      limit_buy_amount: this.state.limit_buy_amount,
      appointment_time: this.state.appointment_time,
      appointment_unit: this.state.appointment_unit,
      unvalid_date_range: this.state.unvalid_date_range,
      remark: this.state.remark,
    }
    const data = await newHttp.catchPost('/msvc-shop/v1/douyin/comedit', params, true)
    if (data === '添加商品信息成功') {
      Taro.showToast({
        title: data.message,
        icon: 'none',
        duration: 2000
      })
      await Taro.navigateBack({delta: 1})
    } else {
      setTimeout(function () {
        Taro.showToast({
          title: data.message,
          icon: 'none',
          duration: 2000
        })
      }, 1000)
    }
  }

  dateChange(o) {
    const {isCheck, value} = o
    const weekly_unavailable = this.state.weekly_unavailable
    if (isCheck) {
      weekly_unavailable.push(value)
    } else {
      weekly_unavailable.splice(weekly_unavailable.indexOf(value), 1)
    }
    this.setState({weekly_unavailable})
  }

  dateChangeUseRule(o) {
    const {isCheck, value, is_enjoy_other_discount, is_need_appointment, is_limit_buy} = o
    const useRule = this.state.useRule
    if (isCheck) {
      useRule.push(value)
    } else {
      useRule.splice(useRule.indexOf(value), 1)
    }
    this.setState({
      useRule,
      is_enjoy_other_discount: useRule.indexOf(1) > -1 ? 1 : 0,
      is_need_appointment: useRule.indexOf(2) > -1 ? 1 : 0,
      is_limit_buy: useRule.indexOf(3) > -1 ? 1 : 0,
    })
  }

  dateChangeHoliday(o) {
    const {isCheck, value,} = o
    const holiday_unavailable = this.state.holiday_unavailable
    if (isCheck) {
      holiday_unavailable.push(value)
    } else {
      holiday_unavailable.splice(holiday_unavailable.indexOf(value), 1)
    }
    this.setState({
      holiday_unavailable
    })
  }

  unUseDataTypeFn(o) {
    const {isCheck, value} = o
    const unUseDataType = this.state.unUseDataType
    if (isCheck) {
      unUseDataType.push(value)
    } else {
      unUseDataType.splice(unUseDataType.indexOf(value), 1)
    }
    this.setState({
      unUseDataType,
      is_weekly: unUseDataType.indexOf(1) > -1 ? 1 : 0,
      is_holiday: unUseDataType.indexOf(2) > -1 ? 1 : 0,
      is_unvalid_date_range: unUseDataType.indexOf(3) > -1 ? 1 : 0,
    })
  }

  chooseImage = (callback, count) => {
    const {main_img} = this.state
    const inp = document.createElement('input');
    inp.setAttribute('type', 'file');
    inp.setAttribute('style', 'display: none;');
    inp['accept'] = '.jpg,.jpeg,.png,.gif'
    inp.multiple = true
    document.body.appendChild(inp)
    inp.click()
    inp.onchange = (e: any) => {
      const files = e.target.files
      if (files.length > 5 || main_img.length + files.length > 5) {
        Taro.showToast({
          title: '请上传2~5张商品图片',
          icon: 'none',
          mask: true
        });
        return false
      }
      callback(e.target.files, files.length)
      document.body.removeChild(inp)
    }
  }
  uploadFile = (files, length, callback) => {
    this.handlerFile(SYSTEM_UPLOAD, files, length, callback, 'file')
  }
  handlerFile = async (api, files, length, callback, type, title = '上传中...') => {
    Taro.showToast({title, duration: 20000, mask: true, icon: 'loading'})
    for (let i = 0; i < length; i++) {
      const file = files[i]
      const formData = new FormData();
      formData.append(type, file);
      try {
        const data = await fileUpload({url: api, data: formData})
        if (type === 'face') {
          callback(data.data.domain + data.data.url)
        } else {
          callback(data.data)
        }
        if (i === length - 1) {
          Taro.hideToast()
        }
      } catch (e) {
        Taro.showToast({
          title: e.message,
          icon: 'none'
        })
      }
    }
  }
  onFileChange = () => {
    const {main_img} = this.state
    const that = this;
    if (TARO_ENV === 'h5') {
      this.chooseImage(async (f, length) => {
        this.uploadFile(f, length, (data) => {
          main_img.push(data)
          that.setState({main_img})
        })
      }, 5)
    } else {
      Taro.chooseImage({
        count: 5,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res => {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          if (tempFilePaths.length > 5 || main_img.length + tempFilePaths.length > 5) {
            Taro.showToast({
              title: '请上传2~5张商品图片',
              icon: 'none',
              mask: true
            });
            return false
          }
          //启动上传等待中...
          Taro.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true
          });
          let uploadImgCount = 0;
          for (let i = 0, h = tempFilePaths.length; i < h; i++) {
            Taro.uploadFile({
              url: BASE_URL + UPLODE_FALE,
              filePath: tempFilePaths[i],
              name: 'file',
              formData: {
                'imgIndex': i
              },
              header: http.getHeader(),
              success: function (res) {
                uploadImgCount++;
                const data = JSON.parse(res.data);
                if (res.statusCode == 400) {
                  Taro.showToast({
                    title: data.message,
                    icon: 'none'
                  });
                  return;
                }
                main_img.push(data.imageUrl)
                that.setState({main_img})
                Taro.hideToast();
              },
              fail: function (res) {
                Taro.hideToast();
                Taro.showModal({
                  title: '错误提示',
                  content: '上传图片失败',
                  showCancel: false
                });
              }
            });
          }
        }
      });
    }
  }

  // 格式化接口返回的日期
  getDateInfo(value) {
    if (!value) {
      return ''
    }
    const date = new Date(value)
    const y = date.getFullYear()
    let MM = date.getMonth() + 1
    MM = MM < 10 ? ('0' + MM) : MM
    let d = date.getDate()
    d = d < 10 ? ('0' + d) : d
    let h = date.getHours()
    h = h < 10 ? ('0' + h) : h
    let m = date.getMinutes()
    m = m < 10 ? ('0' + m) : m
    let s = date.getSeconds()
    s = s < 10 ? ('0' + s) : s
    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
  }

  getDateInfoDate(value) {
    let date
    if (!value) {
      date = new Date()
    } else {
      date = new Date(value)
    }
    const y = date.getFullYear()
    let MM = date.getMonth() + 1
    MM = MM < 10 ? ('0' + MM) : MM
    let d = date.getDate()
    d = d < 10 ? ('0' + d) : d
    let h = date.getHours()
    h = h < 10 ? ('0' + h) : h
    let m = date.getMinutes()
    m = m < 10 ? ('0' + m) : m
    let s = date.getSeconds()
    s = s < 10 ? ('0' + s) : s
    return y + '-' + MM + '-' + d
  }

  addGroupSet() {
    const {goods_info} = this.state
    goods_info.push({group_name: '', option_count: '', item_list: [{name: '', price: 1, count: 7}]})
    this.setState({goods_info})
  }

  delGroupSet(index) {
    const {goods_info} = this.state
    goods_info.splice(index, 1)
    this.setState({goods_info})
  }

  addSet(index) {
    const {goods_info} = this.state
    goods_info[index]['item_list'].push({name: '', price: 1, count: 7})
    this.setState({goods_info})
  }

  delSet(index, key) {
    const {goods_info} = this.state
    goods_info[index]['item_list'].splice(key, 1)
    this.setState({goods_info})
  }

  getSelectorList(index) {
    const {goods_info} = this.state
    const list = [{label: '全部可选', value: 'all'}]
    const length = goods_info[index].item_list.length
    if (length > 1) {
      for (let i = 1; i < length; i++) {
        list.push({label: `${length}选${i}`, value: i + ''})
      }
    }
    return list
  }

  render() {
    const {
      isOpened,
      rangeTimeData,
      remark,
      unvalid_date_range,
      appointment_unit,
      appointment_time,
      limit_buy_amount,
      end_time_head,
      end_time_end,
      start_time_head,
      start_time_end,
      useRule,
      is_weekly,
      is_holiday,
      is_unvalid_date_range,
      unUseDataType,
      goods_info,
      site_fee,
      service_fee,
      commission_fee,
      calculation_mode,
      disabled,
      business,
      valid_date_time_begin,
      valid_date_time_end,
      use_period,
      holiday_unavailable,
      weekly_unavailable,
      valid_time_begin,
      valid_time_end,
      valid_date_days,
      stock,
      valid_date_type,
      name,
      main_img,
      is_limit_stock,
      price,
      vid,
      site_fee_proport, service_fee_proport, commission_fee_proport, start_time, end_time, is_need_phone
    } = this.state
    return (
      <View className={`product-info ${process.env.TARO_ENV == 'h5' ? '' : 'product-info-weapp'}`}>
        <GzhAuth />
        <View className='item'>
          <AtInput
            className='require'
            disabled={disabled}
            name='name'
            title='商品名称'
            type='text'
            maxLength={24}
            placeholder='请输入商品名称'
            value={name}
            border={false}
            onChange={this.handleChange.bind(this, 'name')}
          />
        </View>
        <View className='item'>
          <Picker
            className='require'
            disabled={disabled}
            mode='selector'
            range={business}
            onChange={({detail: {value}}) => this.handleChange('vid', value)}
            rangeKey='name'
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left'>
                所属商家
              </View>
              <View className='product-form-block-item-right'>
                {vid === '' && <View className='mepty'>
                  请选择所属商家
                </View>}
                {vid !== '' && business && business.map((item, index) => <View className='value' key={index}>
                  {item.id == vid ? item.name : ''}
                </View>)}
                <Text className='ret'>&gt;</Text>
              </View>
            </View>
          </Picker>
        </View>
        <View className='product-images item'>
          <View className='product-images-title require'>产品图片<Text
            className='product-images-sub-title'
          >至少上传2张</Text></View>
          <View className='product-form-block-group'>
            {!!main_img && main_img.map((item, index) => <View className='_image-border' key={index}>
              {!disabled && <View className='_close' onClick={(e) => {
                main_img.splice(index, 1)
                this.setState({main_img})
                e.stopPropagation();
              }}
              >
                <Text className='_font'>
                  x
                </Text>
              </View>}
              <Image src={item} className='_image' />
            </View>)}
            {main_img && main_img.length < 5 && !disabled &&
              <View className='image-border' onClick={() => this.onFileChange()}>
                <View className='add'>+</View>
              </View>}
          </View>
        </View>
        <View className='line-bg' />
        <View className='item'>
          <Picker
            className='require'
            disabled={disabled}
            mode='selector'
            range={this.stockRangeList}
            onChange={({detail: {value}}) => this.handleChange('is_limit_stock', value)}
            rangeKey='label'
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left'>
                库存设置
              </View>
              <View className='product-form-block-item-right'>
                {is_limit_stock === '' && <View className='mepty'>
                  请选择库存设置
                </View>}
                {is_limit_stock !== '' && this.stockRangeList && this.stockRangeList.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == is_limit_stock ? item.label : ''}
                </View>)}
                <Text className='ret'>&gt;</Text>
              </View>
            </View>
          </Picker>
        </View>
        {!!is_limit_stock && is_limit_stock == 1 && <AtInput
          disabled={disabled}
          name='stock'
          title='件'
          className='label-right item-right'
          type='number'
          placeholder=''
          value={stock}
          onChange={this.handleChange.bind(this, 'stock')}
        />}
        <View className='item'>
          <AtInput
            disabled={disabled}
            className='item-right require'
            name='price'
            title='销售价'
            type='digit'
            placeholder='请输入销售价'
            value={price}
            onBlur={this.handleChange.bind(this, 'price')}
          />
        </View>
        <View className='line-bg' />
        <View className='item'>
          <Picker
            className='require'
            disabled={disabled}
            mode='selector'
            range={this.calculationList}
            onChange={({detail: {value}}) => this.handleChange('calculation_mode', value)}
            rangeKey='label'
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left'>
                计算方式
              </View>
              <View className='product-form-block-item-right'>
                {calculation_mode === '' && <View className='mepty'>
                  请选择计算方式
                </View>}
                {calculation_mode !== '' && this.calculationList && this.calculationList.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == calculation_mode ? item.label : ''}
                </View>)}
                <Text className='ret'>&gt;</Text>
              </View>
            </View>
          </Picker>
        </View>

        {calculation_mode == 1 && <View>
          <View className='rate'>
            <AtInput
              editable={false}
              name='site_fee_proport'
              title='商家金额占比'
              className='proportion-after item-right rate-money-input'
              maxLength={8}
              type='digit'
              placeholder='自动计算'
              value={site_fee_proport}
              onBlur={this.handleChange.bind(this, 'site_fee_proport')}
            />
            <Text className='rate-modal' onClick={(e) => {
              this.setState({isOpened: true})
            }}
            >查看抖音服务费</Text>
            <View className='rate-money'>
              {(site_fee_proport && price) ?
                (price * Number(site_fee_proport) / 100).toFixed(2) : 0} 元
            </View>
          </View>
          <View className='rate rate-top'>
            <AtInput
              disabled={disabled}
              name='service_fee_proport'
              title='服务商服务费占比'
              className='proportion-after item-right rate-money-input top'
              maxLength={8}
              type='digit'
              placeholder='请输入服务商服务费'
              value={service_fee_proport}
              onBlur={this.handleChange.bind(this, 'service_fee_proport')}
            />
            <View className='rate-money'>
              {(service_fee_proport && price) ?
                (price * Number(service_fee_proport) / 100).toFixed(2) : 0} 元
            </View>
          </View>

          <View className='rate'>
            <AtInput
              disabled={disabled}
              name='commission_fee_proport'
              title='通用佣金占比'
              className='proportion-after item-right rate-money-input'
              maxLength={8}
              type='digit'
              placeholder='请输入通用佣金设置'
              value={commission_fee_proport}
              onBlur={this.handleChange.bind(this, 'commission_fee_proport')}
            />
            <View className='rate-money'>
              {(commission_fee_proport && price) ?
                (price * Number(commission_fee_proport) / 100).toFixed(2) : 0} 元
            </View>
          </View>

        </View>}
        {calculation_mode == 2 && <View>
          <View className='item rate'>
            <AtInput
              disabled={disabled}
              className='item-right require'
              name='site_fee'
              title='商家金额'
              type='digit'
              placeholder='请输入商家金额'
              value={site_fee}
              onBlur={this.handleChange.bind(this, 'site_fee')}
            />
            <Text className='rate-modal' onClick={(e) => {
              this.setState({isOpened: true})
            }}
            >查看抖音服务费</Text>
          </View>
          <View className='item'>
            <AtInput
              disabled={disabled}
              className='item-right require'
              name='service_fee '
              title='服务商金额'
              type='digit'
              placeholder='请输入服务商金额'
              value={service_fee}
              onBlur={this.handleChange.bind(this, 'service_fee')}
            />
          </View>
          <View className='item'>
            <AtInput
              disabled={disabled}
              className='item-right require'
              name='commission_fee '
              title='通用金额'
              type='digit'
              placeholder='请输入通用金额'
              value={commission_fee}
              onBlur={this.handleChange.bind(this, 'commission_fee')}
            />
          </View>
        </View>}
        <View className='line-bg' />
        <View className='border-bottom weight-title group-title-top'>
          商品搭配
          {!disabled && <Text className='group-title-top-add' onClick={() => this.addGroupSet()}>再加一组</Text>}
        </View>
        {goods_info && goods_info.map((item, index) => <View key={index}>
          <View className='group-title border-bottom'>
            <AtInput
              name={item.group_name}
              disabled={disabled}
              className='goods-info-content group-title-group-name'
              placeholder='请输入商品组名称'
              value={item.group_name}
              onChange={this.handleChangeGoodsInfoIndex.bind(this, index, 'group_name')}
            />
            <Picker
              className='group-title-option-count'
              disabled={disabled}
              mode='selector'
              range={this.getSelectorList(index)}
              onChange={({detail: {value}}) => this.handleChangeGoodsInfoIndex(index, 'option_count', value)}
              rangeKey='label'
              value={item.option_count}
            >
              <View className='product-form-block-item'>
                <View className='product-form-block-item-right'>
                  {!item.option_count && <View className='mepty'>
                    请选择类型
                  </View>}
                  {item.option_count !== '' && this.getSelectorList(index).map((items, index) => <View
                    className='value' key={index}
                  >
                    {item.option_count == items.value ? items.label : ''}
                  </View>)}
                  <Text className='ret'>&gt;</Text>
                </View>
              </View>
            </Picker>
          </View>
          <View className='group-info-desc goods-info-div'>
            <Text style={`${TARO_ENV !== 'h5' ? 'width: 30%' : 'width: 40%'}`}>单品名称</Text>
            <Text style={`${TARO_ENV !== 'h5' ? 'width: 30%' : 'width: 20%'}`}>单品数量</Text>
            <Text style='width: 20%'>单品价格</Text>
            <Text style='width: 20%'></Text>
          </View>
          {item.item_list && item.item_list.map((val, key) => <View key={key} className='group-info goods-info-div border-bottom'>
            <AtInput
              name={val.name}
              disabled={disabled}
              className='goods-info-content group-info-name'
              type='text'
              placeholder='请输入单品名称'
              value={val.name}
              onChange={this.handleChangeGoodsInfoKey.bind(this, index, key, 'name')}
            />
            <AtInput
              disabled={disabled}
              className='goods-info-content group-info-count'
              type='number'
              placeholder='单品数量'
              value={val.count}
              onChange={this.handleChangeGoodsInfoKey.bind(this, index, key, 'count')}
            />
            <AtInput
              disabled={disabled}
              className='goods-info-content group-info-price'
              placeholder='请输入单品价格'
              type='digit'
              value={val.price}
              onBlur={this.handleChangeGoodsInfoKey.bind(this, index, key, 'price')}
            />
            <View style='visibility: hidden;width:20%'></View>
            {key == 0 && !disabled &&
              <Text className='at-icon at-icon-add goods-info-icon' onClick={() => this.addSet(index)} />}
            {key != 0 && !disabled &&
              <Text className='at-icon at-icon-subtract goods-info-icon' onClick={() => this.delSet(index, key)} />}
          </View>)}
          {!disabled && index != 0 && <View className='goods-info-del'>
            <Text onClick={() => this.delGroupSet(index)}>删除整组</Text>
          </View>}
          <View className='line-bg' />
        </View>)}
        <View className='item'>
          <Picker className='require' mode='date' disabled={disabled} start={this.today}
            onChange={({detail: {value}}) => this.handleChange('start_time_head', value)} value={start_time_head}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left'>
                开始日期
              </View>
              <View className='product-form-block-item-right'>
                {!start_time_head && <View className='mepty'>
                  请选择开始日期
                </View>}
                {start_time_head && <View className='value'>
                  {start_time_head}
                </View>}
                <Text className='ret'>&gt;</Text>
              </View>
            </View>
          </Picker>
        </View>
        <View className='item'>
          <Picker className='require' mode='date' disabled={disabled} start={this.today}
            onChange={({detail: {value}}) => this.handleChange('end_time_head', value)} value={end_time_head}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left'>
                结束日期
              </View>
              <View className='product-form-block-item-right'>
                {!end_time_head && <View className='mepty'>
                  请选择结束日期
                </View>}
                {end_time_head && <View className='value'>
                  {end_time_head}
                </View>}
                <Text className='ret'>&gt;</Text>
              </View>
            </View>
          </Picker>
        </View>
        <View className='line-bg' />
        <View className='border-bottom weight-title'>交易规则</View>
        <View className='item'>
          <Picker
            className='require'
            disabled={disabled}
            mode='selector'
            range={this.userInfoSettings}
            onChange={({detail: {value}}) => this.handleChange('is_need_phone', value)}
            rangeKey='label'
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left'>
                用户信息设置
              </View>
              <View className='product-form-block-item-right'>
                {is_need_phone === '' && <View className='mepty'>
                  请选择用户信息设置
                </View>}
                {is_need_phone !== '' && this.userInfoSettings && this.userInfoSettings.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == is_need_phone ? item.label : ''}
                </View>)}
                <Text className='ret'>&gt;</Text>
              </View>
            </View>
          </Picker>
        </View>
        <View className='item'>
          <Picker
            className='require'
            disabled={disabled}
            mode='selector'
            range={this.validDateType}
            onChange={({detail: {value}}) => this.handleChange('valid_date_type', value)}
            rangeKey='label'
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left'>
                可使用日期
              </View>
              <View className='product-form-block-item-right'>
                {valid_date_type === '' && <View className='mepty'>
                  请选择可使用日期
                </View>}
                {valid_date_type !== '' && this.validDateType && this.validDateType.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == valid_date_type ? item.label : ''}
                </View>)}
                <Text className='ret'>&gt;</Text>
              </View>
            </View>
          </Picker>
        </View>
        {(valid_date_type !== '' && valid_date_type == 1) && <AtInput
          disabled={disabled}
          name='valid_date_days'
          title='自购买次日起'
          className='proportion-after-date'
          maxLength={6}
          type='number'
          placeholder=''
          value={valid_date_days}
          onChange={this.handleChange.bind(this, 'valid_date_days')}
        />}
        {(valid_date_type !== '' && valid_date_type == 2) && <View className='use-time-wrapper border-bottom'>
          <Picker
            start={this.today}
            disabled={disabled}
            mode='date'
            onChange={
              ({detail: {value}}) => this.handleChange('valid_date_time_begin', value)
            }
            value={valid_date_time_begin}
          >
            <View className='use-time' style={`color:${valid_date_time_begin ? '#000' : '#c5c5c5'};`}>
              {valid_date_time_begin || '请选择开始时间'}
            </View>
          </Picker>
          <View className='use-time-segmentation'>-</View>
          <Picker
            start={this.today}
            disabled={disabled}
            mode='date'
            onChange={
              ({detail: {value}}) => this.handleChange('valid_date_time_end', value)
            }
            value={valid_date_time_end}
          >
            <View className='use-time' style={`color:${valid_date_time_end ? '#000' : '#c5c5c5'};`}>
              {valid_date_time_end || '请选择结束时间'}
            </View>
          </Picker>
        </View>}
        <View className='border-bottom weight-title'>不可用日期（选填）</View>
        <View className='weekdays nowrap border-bottom'>
          <View className='_check title'>
            <Check disabled={disabled} value='每周不可用'
              onChange={(isCheck) => this.unUseDataTypeFn({isCheck, value: 1})}
              isCheck={unUseDataType.indexOf(1) != -1}
            />
          </View>
          {!!is_weekly && is_weekly == 1 && <View className='weekdays nowrap border-bottom'>
            <View className='_check'>
              <Check disabled={disabled} value='周一' onChange={(isCheck) => this.dateChange({isCheck, value: '周一'})}
                isCheck={weekly_unavailable.indexOf('周一') != -1}
              />
            </View>
            <View className='_check'>
              <Check disabled={disabled} value='周二' onChange={(isCheck) => this.dateChange({isCheck, value: '周二'})}
                isCheck={weekly_unavailable.indexOf('周二') != -1}
              />
            </View>
            <View className='_check'>
              <Check disabled={disabled} value='周三' onChange={(isCheck) => this.dateChange({isCheck, value: '周三'})}
                isCheck={weekly_unavailable.indexOf('周三') != -1}
              />
            </View>
            <View className='_check'>
              <Check disabled={disabled} value='周四' onChange={(isCheck) => this.dateChange({isCheck, value: '周四'})}
                isCheck={weekly_unavailable.indexOf('周四') != -1}
              />
            </View>
            <View className='_check'>
              <Check disabled={disabled} value='周五' onChange={(isCheck) => this.dateChange({isCheck, value: '周五'})}
                isCheck={weekly_unavailable.indexOf('周五') != -1}
              />
            </View>
            <View className='_check'>
              <Check disabled={disabled} value='周六' onChange={(isCheck) => this.dateChange({isCheck, value: '周六'})}
                isCheck={weekly_unavailable.indexOf('周六') != -1}
              />
            </View>
            <View className='_check'>
              <Check disabled={disabled} value='周日' onChange={(isCheck) => this.dateChange({isCheck, value: '周日'})}
                isCheck={weekly_unavailable.indexOf('周日') != -1}
              />
            </View>
          </View>}
          <View className='_check title'>
            <Check disabled={disabled} value='节假日不可用'
              onChange={(isCheck) => this.unUseDataTypeFn({isCheck, value: 2})}
              isCheck={unUseDataType.indexOf(2) != -1}
            />
          </View>
          {!!is_holiday && is_holiday == 1 && <View className='weekdays nowrap border-bottom'>
            {this.holidayList && this.holidayList.map((item, index) => <View className='_check' key={index}>
              <Check disabled={disabled} value={item}
                onChange={(isCheck) => this.dateChangeHoliday({isCheck, value: item})}
                isCheck={holiday_unavailable.indexOf(this.holidayList[index]) != -1}
              />
            </View>)}
          </View>}
          <View className='_check title'>
            <Check disabled={disabled} value='指定某天不可用'
              onChange={(isCheck) => this.unUseDataTypeFn({isCheck, value: 3})}
              isCheck={unUseDataType.indexOf(3) != -1}
            />
          </View>
          {!!is_unvalid_date_range && is_unvalid_date_range == 1 && <Picker mode='date' disabled={disabled}
            start={this.today}
            onChange={({detail: {value}}) => this.handleChange('unvalid_date_range', value)}
            value={unvalid_date_range}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left'>
                选择日期
              </View>
              <View className='product-form-block-item-right'>
                {!unvalid_date_range && <View className='mepty'>
                  请选择指定某天不可用
                </View>}
                {unvalid_date_range && <View className='value'>
                  {unvalid_date_range}
                </View>}
                <Text className='ret'>&gt;</Text>
              </View>
            </View>
          </Picker>
          }
        </View>


        <View className='line-bg' />
        <View className='item'>
          <Picker
            className='require'
            disabled={disabled}
            mode='selector'
            range={this.usePeriodList}
            onChange={({detail: {value}}) => this.handleChange('use_period', value)}
            rangeKey='label'
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left'>
                使用时间段
              </View>
              <View className='product-form-block-item-right'>
                {use_period === '' && <View className='mepty'>
                  请选择使用时间段
                </View>}
                {use_period !== '' && this.usePeriodList && this.usePeriodList.map((item, index) => <View className='value' key={index}>
                  {item.value == use_period ? item.label : ''}
                </View>)}
                <Text className='ret'>&gt;</Text>
              </View>
            </View>
          </Picker>
        </View>
        {(use_period !== '' && use_period == 2) && <View className='use-time-wrapper border-bottom'>
          <Picker
            disabled={disabled}
            mode='multiSelector' // 多列选择
            onChange={this.onChangeTime1}
            range={rangeTimeData} //需要展示的数据
            value={valid_time_begin} // 选择的下标
          >
            <View className='use-time' style={`color:${valid_time_begin ? '#000' : '#c5c5c5'};`}>
              {valid_time_begin || '请选择开始时间'}
            </View>
          </Picker>
          <View className='use-time-segmentation'>-</View>
          <Picker
            disabled={disabled}
            mode='multiSelector' // 多列选择
            onChange={this.onChangeTime2}
            range={rangeTimeData} //需要展示的数据
            value={valid_time_end} // 选择的下标
          >
            <View className='use-time' style={`color:${valid_time_end ? '#000' : '#c5c5c5'};`}>
              {valid_time_end || '请选择结束时间'}
            </View>
          </Picker>
        </View>}

        <View className='line-bg' />
        <View className='border-bottom weight-title'>使用规则（选填）</View>
        <View className='weekdays nowrap border-bottom use-rule'>
          <View className='_check'>
            <Check disabled={disabled} value='可享受店内其他优惠'
              onChange={(isCheck) => this.dateChangeUseRule({isCheck, value: 1})}
              isCheck={useRule.indexOf(1) != -1}
            />
          </View>
          <View className='_check'>
            <Check disabled={disabled} value='需要预约'
              onChange={(isCheck) => this.dateChangeUseRule({isCheck, value: 2})}
              isCheck={useRule.indexOf(2) != -1}
            />
          </View>
          <View className='_check'>
            <Check disabled={disabled} value='限制购买'
              onChange={(isCheck) => this.dateChangeUseRule({isCheck, value: 3})}
              isCheck={useRule.indexOf(3) != -1}
            />
          </View>
        </View>
        {(useRule !== '' && useRule.indexOf(2) > -1) &&
          <View className={`appointment-unit ${process.env.TARO_ENV != 'h5' ? 'appointment-unit-weapp' : ''}`}><AtInput
            disabled={disabled}
            name='appointment_time'
            title='需提前'
            className='proportion-after-date appointment_time appointment-unit'
            maxLength={6}
            type='number'
            placeholder=''
            value={appointment_time}
            onChange={this.handleChange.bind(this, 'appointment_time')}
          />
            <View>
              <Picker
                className='appointment-unit-pick'
                disabled={disabled}
                mode='selector'
                range={this.appointmentUnit}
                onChange={({detail: {value}}) => this.handleChange('appointment_unit', value)}
                rangeKey='label'
              >
                <View className='product-form-block-item border-bottom'>
                  <View className='product-form-block-item-right'>
                    {appointment_unit !== '' && this.appointmentUnit && this.appointmentUnit.map((item, index) => <View
                      className='value' key={index}
                    >
                      {item.label == appointment_unit ? item.label : ''}
                    </View>)}
                    <Text className='ret'>&gt;</Text>
                  </View>
                </View>
              </Picker>
            </View>
          </View>
        }
        {(useRule !== '' && useRule.indexOf(3) > -1) && <AtInput
          disabled={disabled}
          name='valid_date_days'
          title='每人最多购买'
          className='proportion-after-date limit-buy-amount'
          maxLength={6}
          type='number'
          placeholder=''
          value={limit_buy_amount}
          onChange={this.handleChange.bind(this, 'limit_buy_amount')}
        />}

        <View className='line-bg' />
        <View className='border-bottom weight-title'>其他说明</View>
        <AtTextarea value={remark} maxLength={500} onChange={this.handleChange.bind(this, 'remark')}
          placeholder='请输入其他规则限制，规则需与其他商品信息前后一致，多条规则请回车换行区分'
          count={false}
          placeholderClass='placeholderClass'
          height={250}
        />
        <View style='height: 90px' />
        {!disabled && <View className='foot-btn product-foot-btn'>
          <View className={`${TARO_ENV === 'h5' ? "btn h5-small active" : "btn active"}`}
            onClick={() => this.save(1)}
          >保存</View>
        </View>}
        <AtModal isOpened={isOpened} className='douyin-rate' onClose={() => this.setState({isOpened: false})}>
          <AtModalHeader>
            查看抖音服务费
            <Text className='at-icon at-icon-close douyin-rate-close' onClick={() => this.setState({isOpened: false})} />
          </AtModalHeader>
          <AtModalContent>
            <View className='douyin-rate-item'>
              <Text>2%</Text>
              <Text className='douyin-rate-item-result'>￥{price ? (Number(price) * 0.02).toFixed(2) : 0}</Text>
            </View>
            <View className='douyin-rate-item'>
              <Text>2.5%</Text>
              <Text className='douyin-rate-item-result'>￥{price ? (Number(price) * 0.025).toFixed(2) : 0}</Text>
            </View>
            <View className='douyin-rate-item'>
              <Text>3%</Text>
              <Text className='douyin-rate-item-result'>￥{price ? (Number(price) * 0.03).toFixed(2) : 0}</Text>
            </View>
            <View className='douyin-rate-item'>
              <Text>3.5%</Text>
              <Text className='douyin-rate-item-result'>￥{price ? (Number(price) * 0.035).toFixed(2) : 0}</Text>
            </View>
          </AtModalContent>
        </AtModal>
      </View>
    )
  }
}
